<script setup lang="tsx">
import { computed, onMounted, ref, watch } from 'vue';
import type { Crontab } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'CrontabYear'
});

interface Props {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
  check: Function;
  cron: Crontab;
}
const props = defineProps<Props>();

interface Emits {
  (e: 'update'): void;
}
const emit = defineEmits<Emits>();

const yearRadioValue = ref('1');
const fullYear = ref(0);
const yearCycle01 = ref(0);
const yearCycle02 = ref(0);
const yearAverage01 = ref(0);
const yearAverage02 = ref(1);
const yearCheckboxList = ref<string[]>([]);

const yearOptions: any = [];
function initYearOptions() {
  for (let i = 0; i < 9; i += 1) {
    yearOptions.push({
      label: i - 1 + fullYear.value,
      value: i - 1 + fullYear.value
    });
  }
}
initYearOptions();

function retsetParam() {
  fullYear.value = 0;
  yearCycle01.value = 0;
  yearCycle02.value = 0;
  yearAverage01.value = 0;
  yearAverage02.value = 1;
  yearCheckboxList.value = [];
}

// 计算两个周期值
const yearCycleTotal = computed(() => {
  const c01 = props.check(yearCycle01.value, fullYear.value, 2098);
  const c02 = props.check(yearCycle02.value, c01 ? c01 + 1 : fullYear.value + 1, 2099);
  return `${c01}-${c02}`;
});
// 计算平均用到的值
const yearAverageTotal = computed(() => {
  const a01 = props.check(yearAverage01.value, fullYear.value, 2098);
  const a02 = props.check(yearAverage02.value, 1, 2099 - yearAverage01.value || fullYear.value);
  return `${a01}/${a02}`;
});
// 计算勾选的checkbox值合集
const yearCheckboxString = computed(() => {
  return yearCheckboxList.value.join();
});

watch(
  () => props.cron,
  () => {
    yearValueChange(props.cron);
  }
);
watch(
  () => yearRadioValue.value,
  () => {
    radioChange();
  }
);
watch(
  () => yearCycleTotal.value,
  () => {
    yearCycleChange();
  }
);
watch(
  () => yearAverageTotal.value,
  () => {
    yearAverageChange();
  }
);
watch(
  () => yearCheckboxString.value,
  () => {
    yearCheckboxChange();
  }
);

// 单选按钮值变化时
function radioChange() {
  switch (yearRadioValue.value.toString()) {
    case '1':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'year', '');
      break;
    case '2':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'year', '*');
      break;
    case '3':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'year', yearCycleTotal.value);
      break;
    case '4':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'year', yearAverageTotal.value);
      break;
    case '5':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'year', yearCheckboxString.value);
      break;
    default:
      break;
  }
}
// 周期两个值变化时
function yearCycleChange() {
  yearRadioValue.value = '3';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'year', yearCycleTotal.value);
}
// 平均两个值变化时
function yearAverageChange() {
  yearRadioValue.value = '4';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'year', yearAverageTotal.value);
}
// checkbox值变化时
function yearCheckboxChange() {
  yearRadioValue.value = '5';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'year', yearCheckboxString.value);
}

function yearValueChange(cronVal: Crontab) {
  yearRadioValue.value = '';
  retsetParam();
  // 仅获取当前年份
  fullYear.value = Number(new Date().getFullYear());
  yearCycle01.value = fullYear.value;
  yearAverage01.value = fullYear.value;
  const val = cronVal.year;
  if (val === '') {
    yearRadioValue.value = '1';
  } else if (val === '*') {
    yearRadioValue.value = '2';
  } else if (val.includes('-')) {
    yearRadioValue.value = '3';
    const v = val.split('-');
    yearCycle01.value = Number.parseInt(v[0], 10);
    yearCycle02.value = Number.parseInt(v[1], 10);
  } else if (val.includes('/')) {
    yearRadioValue.value = '4';
    const v = val.split('/');
    yearAverage01.value = Number.parseInt(v[0], 10);
    yearAverage02.value = Number.parseInt(v[1], 10);
  } else {
    yearRadioValue.value = '5';
    yearCheckboxList.value = val.split(',');
  }
}

onMounted(() => {
  const cronVal = props.cron;
  yearValueChange(cronVal);
});
</script>

<template>
  <div class="cron-config">
    <NForm>
      <NRadioGroup v-model:value="yearRadioValue">
        <NFormItem class="form-item-height">
          <NRadio value="1">{{ $t('common.job.yearOne') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="2">{{ $t('common.job.yearTwo') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="3" />
          &nbsp;{{ $t('common.job.yearThree') }}&nbsp;
          <NInputNumber v-model:value="yearCycle01" :min="fullYear" :max="2098" button-placement="both"></NInputNumber>
          &nbsp;-&nbsp;
          <NInputNumber
            v-model:value="yearCycle02"
            :min="yearCycle01 ? yearCycle01 + 1 : fullYear + 1"
            :max="fullYear"
            button-placement="both"
          />
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="4" />
          &nbsp;{{ $t('common.job.yearFourPre') }}&nbsp;
          <NInputNumber v-model:value="yearAverage01" :min="fullYear" :max="2098" button-placement="both" />
          &nbsp;{{ $t('common.job.yearFourMid') }}&nbsp;
          <NInputNumber
            v-model:value="yearAverage02"
            :min="1"
            :max="2099 - yearAverage01 || fullYear"
            button-placement="both"
          />
          &nbsp;{{ $t('common.job.yearFourSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="5" />
          &nbsp;{{ $t('common.job.specify') }}&nbsp;
          <NSelect
            v-model:value="yearCheckboxList"
            :options="yearOptions"
            multiple
            class="w-50%"
            :placeholder="$t('common.job.multipleChoices')"
          />
        </NFormItem>
      </NRadioGroup>
    </NForm>
  </div>
</template>

<style scoped>
.form-item-height {
  --n-blank-height: 0px !important;
  --n-feedback-height: 0px !important;
}
</style>
